<template>
    <view>
        <view class="form_list_bg">
            <text class="form_list_title">资质</text>
            <image  style="width: 100%;height: 167rpx;" src="https://image1.sansancloud.com/linwenlaoshi/2020_9/9/17/42/39_192.jpg"></image>
        </view>
        <view class="form_list_container">
            <view class="product_type_list">
                  <view  v-for="(item,index) in productTypeList" :key="index" @tap="bindTypeItem(index,'one')" :id="'tab_'+item.id" class='tab-item' :style="{color:positionTab==index?defaultColor:'',}">
                    {{item.name}}
                    <text class="active_border" :style="{borderBottom:'4rpx solid '+defaultColor}" v-if="positionTab==index"></text>
                  </view>
            </view>
            <view class="product_list" v-if="productData&&productData.length!=0">
                  <view  v-for="(item,index) in productData" :key="index" @tap="bindTypeItem(index,'two')" :id="'tab_'+item.id" class='tab-pro-item' :style="{color:proPositionTab==index?defaultColor:'',}">
                    <image class="product_item_img" mode="widthFix" :src="item.imagePath+'?x-oss-process=style/preview_120'"></image>
                    <view class="product_item_text">
                        {{item.name}}
                        <text class="active_dot" :style="{background:defaultColor}" v-if="proPositionTab==index"></text>
                    </view>
                  </view>
            </view>
            <view class="noproduct" v-else>
              <image mode="widthFix" src='https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120'></image>
              <text>没有相关素材</text>
            </view>
        </view>
       <custom-page-index-component id="container" @refreshFun="getRefreshFun"></custom-page-index-component>
    </view>
</template>

<script>
import publicFun from '../../wxcomponents/public/publicFun.wxs'

export default {
  data() {
    return {
      loading: true,
      sendOptionData: null,
      statusBarHeight:getApp().globalData.statusBarHeight,
      positionTab:0,
      setting: "",
      productData:null,
      productTypeList:[
          {name:'资质证书',id:'1'},
          {name:'品牌视频',id:'2'},
      ],
      listPage:{
          page: 1,
          pageSize: 40,
          totalSize: 0,
          categoryId: 0,
      },
      secondColor:'',
      defaultColor:'',
    };
  },
  props: {},
  onLoad: function (options) {
    this.publicFun = publicFun;
    let that = this;
    that.initSetting();
    console.log('===options===', options);
    that.setData({
      sendOptionData: options
    });
    that.getData(that.listPage);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
      let that=this;
      getApp().globalData.addAuthorizationListenerItem(that)//授权头像
    	that.setData({
          setting:getApp().globalData.setting,
          defaultColor:getApp().globalData.setting.platformSetting.defaultColor,
          secondColor:getApp().globalData.setting.platformSetting.secondColor,
         })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    let that = this;
    that.Data = [];
    let sendOptionData = that.sendOptionData;
    console.log("========onPullDownRefresh============", that.selectResultsObj);
    that.selectComponent("#formCommitList").pullDownRefreshFun();
    wx.hideNavigationBarLoading(); //完成停止加载

    wx.stopPullDownRefresh(); //停止下拉刷新
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('===onReachBottom====');
    let that = this;
    that.selectComponent("#formCommitList").reachBottomFun(); // if (that.listPage.totalSize > that.listPage.page * that.listPage.pageSize) {
    //   that.listPage.page++
    //   this.getData();
    // }
  },

  /**
     * 用户点击右上角分享
     */
  onShareTimeline:function(){
    return this.shareFun();
  },
  onShareAppMessage: function (res) {
    console.log(res);
    return this.shareFun();
  },
  methods: {
    getStateData: function (state) {
      let that = this;
      console.log("===getStateData===", state);
      that.selectComponent("#container").setPopupState(state);
    },
    getRefreshFun:function(){
        let that=this;
        // that.linkEvent(that.backUrl,'reLaunch');
    },
    shareFun:function(){
        let that = this;
        that.closeZhezhao();
        let customFormData = that.selectComponent("#formCommitList").data.customFormData;
        console.log('that.data.customFormData:', customFormData);
        let params = {
          customFormId: customFormData.id
        };
        let shareName = customFormData.name;
        console.log('params:', params);
        return getApp().globalData.shareForFx2('form_commit_list', shareName, params, '', 'customFormId');
    },
    getDataFun: function (e) {
      let that = this;
      console.log("===getDataFun===", e);
      let data = e.detail;
      // wx.setNavigationBarTitle({
      //   title: data.formName
      // });
    },
    /* 获取数据 */
    getData: function (param) {
      let that = this;
      let customIndex = getApp().globalData.AddClientUrl("/more_product_list.html", param);
      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log(res.data);
          that.listPage.pageSize = res.data.pageSize;
          that.listPage.curPage = res.data.curPage;
          that.listPage.totalSize = res.data.totalSize;
          let dataArr = that.productData;
          if (param.page==1) {
            dataArr = res.data.result||[];
          }else{
            dataArr = dataArr.concat(res.data.result||[]);
          }
          that.setData({
            productData: dataArr
          });
          // if(dataArr.length!=0){
          //     that.getAlbumMaterialTypesData(dataArr[0].id);
          // }
          wx.hideLoading();
        },
        fail: function (res) {
          console.log("fail");
          wx.hideLoading();
          getApp().globalData.loadFail();
        },
        complete: function () {
          that.setData({
            canRefresh: true
          });
        }
      });
    },
    getAlbumMaterialTypesData:function(productId){
        let that = this;
        let param={
            productId:productId||0
        }
        let customIndex = getApp().globalData.AddClientUrl("/wx_find_album_material_types.html", param);
        getApp().globalData.showToastLoading('loading', true);
        wx.request({
          url: customIndex.url,
          header: getApp().globalData.header,
          success: function (res) {
            console.log(res.data);
            let dataArr = res.data.relateObj.result;
            that.materialLibraryTypeList=dataArr;
            let item='';
            let url='';
            let type='0'
            if(that.positionTab==0){
                for(let i=0;i<dataArr.length;i++){
                    if(dataArr[i].name=='资质证书'){
                        item=dataArr[i];
                    }
                }
            }else{
                type='2'
                for(let i=0;i<dataArr.length;i++){
                    if(dataArr[i].name=='品牌视频'){
                        item=dataArr[i];
                    }
                }
            }
            if(!item){
                wx.showToast({
                  title: '该产品没有相关素材',
                  icon: 'none',
                  duration: 1000
                });
                return
            }else{
                url='material_library_detail.html?typeId='+item.id+'&productId='+productId+'&typeName='+item.name+'&type='+type;
            }
            that.tolinkUrl(url)
            wx.hideLoading();
          },
          fail: function (res) {
            console.log("fail");
            wx.hideLoading();
            getApp().globalData.loadFail();
          },
          complete: function () {
            that.setData({
              canRefresh: true
            });
          }
        });
    },
    bindTypeItem:function(index,type){
        let that=this;
        if(type=='one'){
            that.positionTab=index;
        }else{
            that.getAlbumMaterialTypesData(that.productData[index].id);
        }
        
    },
    /* 组件事件集合 */
    tolinkUrl: function (data) {
      let linkUrl = data.currentTarget ? data.currentTarget.dataset.link : data;
      console.log("==linkUrl===", linkUrl);
      getApp().globalData.linkEvent(linkUrl);
    },
    initSetting() {
      this.setData({
        setting: getApp().globalData.setting
      });
    },

    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style scoped>
@import "./index.css";
</style>